<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex justify-between pl-26px pt-26px pr-26px">
            <div class="flex items-center article-data">
                推广中的文章总数： <b class="text-green">{{ state.promotionArticles }}</b>推广中的关键词总数：<b class="text-orange">{{ state.promotionWords }}</b>
            </div>
        </div>
        <div class="pt-26px pb-26px pl-26px pr-26px table-container">
            <el-table :data="state.products" class="w-full">
                <el-table-column prop="Title" label="标题名称" align="center">
                    <template #default="scope">
                        <el-link :href="'#/b2b/article/detail/' + scope.row.ID">{{ scope.row.Title }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="Keyword" label="主关键词" align="center" width="180" />
                <el-table-column prop="CreateTime" label="添加时间" align="center" width="120">
                    <template #default="scope">
                        {{ FormatDate(scope.row.CreateTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="UpperShelfDate" label="发布时间" align="center" width="120">
                    <template #default="scope">
                        {{ formatDate(scope.row.UpperShelfDate) }}
                    </template>
                </el-table-column>
                <el-table-column prop="PromotionDate" label="推广时间" align="center" width="120">
                    <template #default="scope">
                        {{ formatDate(scope.row.PromotionDate) }}
                    </template>
                </el-table-column>
                <el-table-column prop="Domainlist" label="推广网站" align="center" width="220" />
                <el-table-column label="到期时间" align="center" width="120">
                    {{ formatDate(state.expirationDate) }}
                </el-table-column>
                <el-table-column label="操作" align="center" width="120">
                    <template #default="scope">
                        <el-button :icon="SoldOut" type="primary" text class="!ml-0" @click="handleCancelPromotion(scope.row.ID)">撤销推广</el-button>  
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { SoldOut,WarningFilled,SuccessFilled } from '@element-plus/icons-vue'
import { dateFormat,formatDateString } from '@/utils/date'
import { confirmMessageBox } from '@/utils/elMessageBox'
import { getPromotionArticleApi,cancelPromotionArticleApi,batchDownProductApi } from '@/api/b2b'

const state = reactive({
    products:[],
    promotionArticles:0,
    promotionWords:0,
    expirationDate:'',//到期时间
})

const formatDate = computed(() => {
    return function(data:string){
        if(data === ''){
            return '-'
        }
        return dateFormat(data,'YYYY-MM-DD')
    }
})
const FormatDate = computed(() => {
    return function(data:string){
        if(data === ''){
            return '-'
        }
        return formatDateString(data,'YYYY-MM-DD')
    }
})

async function getPromotionArticle(){
    const res: ResType = await getPromotionArticleApi()
    console.log(res)
    if(res.code === 200){
        state.products = res.data
        state.expirationDate = res.serviceendtime
        state.promotionArticles = res.tgarticlecount
        state.promotionWords = res.kwcount
    }  
}

function handleCancelPromotion(id:number){
    confirmMessageBox(WarningFilled, '撤销技术文章影响推广效果，是否确定撤销吗？', '','',async () => {
        const res: ResType = await cancelPromotionArticleApi({
            id:id
        })
        if(res.code === 200){
            confirmMessageBox(SuccessFilled,res.message,'','',async() => {
                await getPromotionArticle()
            })
        }
    })
}

onMounted(() => {
    getPromotionArticle()
})  
</script>

<style lang="scss" scoped>
.article-data {
    font-size: 14px;
    color: var(--title-color);
    b{
        font-size: 22px;
        font-family: 'Din WEB';
        margin-right: 30px;
    }
}
</style>